<!--<!DOCTYPE html>-->
<html ng-app="myApp" id = "mycontroller" ng-controller="FaultsController" ng-init="getFault()">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 故障详情</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../css/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">

    <link href="../css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">
    <link href="https://vjs.zencdn.net/5.11.7/video-js.css" rel="stylesheet">



    <style>

        .lightBoxGallery img {
            margin: 6px;
            width: 160px;
            height: 100px;
        }

        /*webrtc video style*/
        #videos {
            position: absolute;
            left: 30%;
            top: 0;
            bottom: 0;
            right: 0;
            overflow: auto;
        }

        #videos video {
            display: inline-block;
            width: 32%;
        }
    </style>

</head>

<body class="gray-bg">

    <div class="row">
        <div class="col-sm-9">
            <div class="wrapper wrapper-content animated fadeInUp">
                <div class="ibox">
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="m-b-md">
                                    <a ng-click="editFault(fault._id)" class="btn btn-white btn-xs pull-right">编辑项目</a>
                                    <h2 ng-bind="fault.title" style="font-weight:bold; margin-left: 30px;"></h2>
                                </div>
                                <dl class="dl-horizontal">
                                    <dt>状态：</dt>
                                    <dd><span class="label label-primary">进行中</span>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <dl class="dl-horizontal">


                                    <dt>所在工厂车间：</dt>
                                    <dd ng-bind="fault.factory"></dd>
                                    <dt>机床型号：</dt>
                                    <dd ng-bind="fault.machine_type"></dd>
                                    <dt>故障部位：</dt>
                                    <dd ng-bind="fault.location"></dd>
                                    <dt>故障等级：</dt>
                                    <dd><span class="badge badge-primary" ng-show="fault.level == '较为严重' " ng-bind="fault.level"></span>
                                        <span class="badge badge-danger" ng-show="fault.level == '严重' " ng-bind="fault.level"></span>
                                        <span class="badge badge-danger" ng-show="fault.level == '非常严重' " ng-bind="fault.level"></span>
                                        <span class="badge badge-primary" ng-show="fault.level == '轻微' " ng-bind="fault.level"></span>
                                    </dd>

                                </dl>
                            </div>
                            <div class="col-sm-6" id="cluster_info">
                                <dl class="dl-horizontal">

                                    <dt>最后更新：</dt>
                                    <dd ng-bind="fault.diagnosis[fault.diagnosis.length-1].date|date:'yyyy-MM-dd HH:mm:ss'"></dd>
                                    <dt>发生于：</dt>
                                    <dd ng-bind="fault.occur_date|date:'yyyy-MM-dd HH:mm:ss'"></dd>
                                    <dt>维修人员姓名：</dt>
                                    <dd ng-bind="fault.manu_man_name">

                                    </dd>

                                    <dt>维修人员电话：</dt>
                                    <dd ng-bind="fault.manu_man_tel">

                                    </dd>
                                </dl>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12" style="text-align: left">
                                <dl class="dl-horizontal">
                                    <dt>当前进度</dt>
                                    <dd>
                                        <div class="progress progress-striped active m-b-sm">
                                            <div style="width: {{ fault.progress * 100 }}%;" class="progress-bar"></div>
                                        </div>
                                        <small>当前已完成维修进度的 <strong>{{ fault.progress * 100 }}%</strong></small>
                                    </dd>
                                </dl>
                            </div>
                        </div>


                        <div class="row" id="faulti-mage">
                            <div class="col-sm-12">
                                <div style="margin-left: 30px;">
                                <p class="lightBoxGallery" ng-repeat="image in fault.images" style="display: inline">
                                    <a href="../imageUploads/{{ image.title }}" title="图片" data-gallery=""><img src="../imageUploads/{{ image.title }} "></a>

                                </p>

                                </div>

                                <div id="blueimp-gallery" class="blueimp-gallery">
                                    <div class="slides"></div>
                                    <h3 class="title"></h3>
                                    <a class="prev">‹</a>
                                    <a class="next">›</a>
                                    <a class="close">×</a>
                                    <a class="play-pause"></a>
                                    <ol class="indicator"></ol>
                                </div>

                                <ul class="nav nav-tabs">


                            </div>


                        </div>










                        <div class="row m-t-sm">
                            <div class="col-sm-12">
                                <div class="panel blank-panel">
                                    <div class="panel-heading">
                                        <div class="panel-options">
                                            <ul class="nav nav-tabs">
                                                <!--<li><a class="active" href="#tab-1" data-toggle="tab" aria-expanded="true">实时传感器</a>-->
                                                <!--</li>-->
                                                <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">故障处理</a>
                                                </li>
                                                <!--<li class=""><a href="#tab-2" data-toggle="tab"  aria-expanded="false">最新更新</a>-->
                                                <!--</li>-->
                                                <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">历史数据</a>
                                                </li>

                                                <li><a data-toggle="tab" href="#tab-3" aria-expanded="true">实时传感器</a>
                                                </li>

                                                <li><a data-toggle="tab" href="#tab-4" aria-expanded="true">故障视频</a>
                                                </li>
                                                <li><a data-toggle="tab" href="#tab-5" aria-expanded="true">维修直播</a>
                                                </li>

                                            </ul>
                                        </div>
                                    </div>

                                    <!--<div class="panel-body">-->

                                        <div class="tab-content">

                                            <div id="tab-1" class="tab-pane active">
                                                <!--<div id="graph-container" style="width:500px;height:200px"></div>-->

                                                <div class="panel-body">

                                                    <div class="" id="ibox-content">

                                                        <div id="vertical-timeline" class="vertical-container dark-timeline">
                                                            <div class="vertical-timeline-block" ng-repeat="diag in fault.diagnosis">
                                                                <div class="vertical-timeline-icon navy-bg">
                                                                    <i class="fa fa-briefcase"></i>
                                                                </div>

                                                                <div class="vertical-timeline-content">
                                                                    <h2 ng-bind="diag.title"></h2>
                                                                    <pre ng-bind="diag.text" style="border-width: 0px">
                                                                    </pre>
                                                                    <a href="#" class="btn btn-sm btn-primary"> 更多信息</a>
                                                                    <span class="vertical-date">
                                         <br>
                                        <small ng-bind="diag.date|date:'yyyy-MM-dd HH:mm:ss'"></small>
                                    </span>
                                                                </div>
                                                            </div>




                                                        </div>

                                                    </div>





                                                    <hr>


                                                    <div class="row" >
                                                        <div class="col-md-2" style="text-align: center">
                                                            <div style="margin-bottom: 20px;margin-top: 25px">
                                                                <h4 style="display: inline;margin-bottom-bottom: 40px">进度调整</h4>
                                                            </div>
                                                            <div class="m-r-md inline row" style="text-align: center;margin: auto" >


                                                                <input  id="progress" type="text"  value=10 class="dial m-r-sm" data-fgColor="#24B7E5" data-width="85" data-height="85" />
                                                            </div>

                                                        </div>

                                                        <div class="col-md-10">
                                                            <div style="margin-bottom: 10px">

                                                                <input type="text" placeholder="填写诊断标题..." class="form-control " id="diagTitle">
                                                            </div>
                                                            <div class="media-body" >
                                                                <textarea id="diagText" class="form-control" placeholder="填写诊断详情..." style="height: 200px"></textarea>
                                                            </div>
                                                        </div>



                                                    </div>

                                                    <div class="row" style="margin-top: 20px;margin-right: 20px">
                                                        <button class="pull-right btn btn-primary" id="subDiag">提交新的诊断</button>
                                                    </div>




                                                </div>


                                            </div>
                                            <div class="tab-pane" id="tab-2">
                                                <div class="panel-body row">
                                                    <div class="col-sm-4">
                                                        <div class="ibox float-e-margins">
                                                            <div class="ibox-title">
                                                                <h5>选择数据节点</h5>
                                                                <div class="ibox-tools">
                                                                    <a class="collapse-link">
                                                                        <i class="fa fa-chevron-up"></i>
                                                                    </a>
                                                                    <a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
                                                                        <i class="fa fa-wrench"></i>
                                                                    </a>
                                                                    <ul class="dropdown-menu dropdown-user">
                                                                        <li><a href="buttons.html#">选项1</a>
                                                                        </li>
                                                                        <li><a href="buttons.html#">选项2</a>
                                                                        </li>
                                                                    </ul>
                                                                    <a class="close-link">
                                                                        <i class="fa fa-times"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="ibox-content" style="display: block;">
                                                                <div id="treeview4" class="test treeview"><ul class="list-group"><li class="list-group-item node-treeview4" data-nodeid="0" style=""><span class="icon"><i class="click-expand glyphicon glyphicon-plus"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>父节点 1</li><li class="list-group-item node-treeview4" data-nodeid="1" style=""><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>父节点 2</li><li class="list-group-item node-treeview4" data-nodeid="2" style=""><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>父节点 3</li><li class="list-group-item node-treeview4" data-nodeid="3" style=""><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>父节点 4</li><li class="list-group-item node-treeview4 node-selected" data-nodeid="4" style="color:#FFFFFF;background-color:#428bca;"><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>父节点 5</li></ul></div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-sm-8" id="history-container" style="height:300px"></div>


                                                    <!--<div class="col-sm-4">-->
                                                        <!--<div class="ibox float-e-margins">-->
                                                            <!--<div class="ibox-title">-->
                                                                <!--<h5>选择电流数据节点</h5>-->
                                                                <!--<div class="ibox-tools">-->
                                                                    <!--<a class="collapse-link">-->
                                                                        <!--<i class="fa fa-chevron-up"></i>-->
                                                                    <!--</a>-->
                                                                    <!--<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">-->
                                                                        <!--<i class="fa fa-wrench"></i>-->
                                                                    <!--</a>-->
                                                                    <!--<ul class="dropdown-menu dropdown-user">-->
                                                                        <!--<li><a href="buttons.html#">选项1</a>-->
                                                                        <!--</li>-->
                                                                        <!--<li><a href="buttons.html#">选项2</a>-->
                                                                        <!--</li>-->
                                                                    <!--</ul>-->
                                                                    <!--<a class="close-link">-->
                                                                        <!--<i class="fa fa-times"></i>-->
                                                                    <!--</a>-->
                                                                <!--</div>-->
                                                            <!--</div>-->
                                                            <!--<div class="ibox-content" style="display: block;">-->
                                                                <!--<div id="treeview5" class="test treeview"><ul class="list-group"><li class="list-group-item node-treeview4" data-nodeid="0" style=""><span class="icon"><i class="click-expand glyphicon glyphicon-plus"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>父节点 1</li><li class="list-group-item node-treeview4" data-nodeid="1" style=""><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>父节点 2</li><li class="list-group-item node-treeview4" data-nodeid="2" style=""><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>父节点 3</li><li class="list-group-item node-treeview4" data-nodeid="3" style=""><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>父节点 4</li><li class="list-group-item node-treeview4 node-selected" data-nodeid="4" style="color:#FFFFFF;background-color:#428bca;"><span class="icon"><i class="glyphicon"></i></span><span class="icon"><i class="glyphicon glyphicon-stop"></i></span>父节点 5</li></ul></div>-->
                                                            <!--</div>-->
                                                        <!--</div>-->
                                                    <!--</div>-->

                                                <!--<table class="table table-striped">-->
                                                    <!--<thead>-->
                                                        <!--<tr>-->
                                                            <!--<th>状态</th>-->
                                                            <!--<th>标题</th>-->
                                                            <!--<th>开始时间</th>-->
                                                            <!--<th>结束时间</th>-->
                                                            <!--<th>说明</th>-->
                                                        <!--</tr>-->
                                                    <!--</thead>-->
                                                    <!--<tbody>-->
                                                        <!--<tr>-->
                                                            <!--<td>-->
                                                                <!--<span class="label label-primary"><i class="fa fa-check"></i> 已完成</span>-->
                                                            <!--</td>-->
                                                            <!--<td>-->
                                                                <!--故障发生的录入-->
                                                            <!--</td>-->
                                                            <!--<td>-->
                                                                <!--11月7日 22:03-->
                                                            <!--</td>-->
                                                            <!--<td>-->
                                                                <!--11月7日 20:11-->
                                                            <!--</td>-->
                                                            <!--<td>-->
                                                                <!--<p class="small">-->
                                                                    <!--已经测试通过-->
                                                                <!--</p>-->
                                                            <!--</td>-->

                                                        <!--</tr>-->
                                                        <!--<tr>-->
                                                            <!--<td>-->
                                                                <!--<span class="label label-primary"><i class="fa fa-check"></i> 解决中</span>-->
                                                            <!--</td>-->
                                                            <!--<td>-->
                                                                <!--故障的初步诊断-->
                                                            <!--</td>-->
                                                            <!--<td>-->
                                                                <!--11月7日 22:03-->
                                                            <!--</td>-->
                                                            <!--<td>-->
                                                                <!--11月7日 20:11-->
                                                            <!--</td>-->
                                                            <!--<td>-->
                                                                <!--<p class="small">-->
                                                                    <!--测试中-->
                                                                <!--</p>-->
                                                            <!--</td>-->

                                                        <!--</tr>-->
                                                        <!--<tr>-->
                                                            <!--<td>-->
                                                                <!--<span class="label label-primary"><i class="fa fa-check"></i> 解决中</span>-->
                                                            <!--</td>-->
                                                            <!--<td>-->
                                                                <!--故障的追踪调研-->
                                                            <!--</td>-->
                                                            <!--<td>-->
                                                                <!--11月7日 22:03-->
                                                            <!--</td>-->
                                                            <!--<td>-->
                                                                <!--11月7日 20:11-->
                                                            <!--</td>-->
                                                            <!--<td>-->
                                                                <!--<p class="small">-->
                                                                    <!--未测试-->
                                                                <!--</p>-->
                                                            <!--</td>-->

                                                        <!--</tr>-->


                                                    <!--</tbody>-->
                                                <!--</table>-->

                                                </div>

                                            </div>


                                            <div id="tab-3" class="tab-pane">

                                                <div class="panel-body">
                                                    <h3 id="noticeNoLink">远程传感器尚未连接</h3>
                                                    <div id="temperate-container" style="min-width:700px;height:300px"></div>

                                                    <div id="current-container" style="min-width:700px;height:300px"></div>

                                                    <!--<video id="my-video" class="video-js" controls preload="auto" width="320" height="568"-->
                                                           <!--data-setup='{"autoplay":true}' style="display: inline-block">-->
                                                        <!--<source src="rtmp://cncmonitor.top:1935/rtmplive/room" type="rtmp"/>-->
                                                    <!--</video>-->
                                                </div>




                                                <!--<button class="btn btn-primary pull-left" id="saveDatalist">保存当前数据</button>-->
                                                <!--<div id="graph-container" style="width:500px;height:200px"></div>-->

                                            </div>

                                            <div id="tab-4" class="tab-pane">

                                                <div class="panel-body">


                                                    <!--<p class="lightBoxGallery" ng-repeat="image in fault.images" style="display: inline">-->
                                                        <!--<a href="../imageUploads/{{ image.title }}" title="图片" data-gallery=""><img src="../imageUploads/{{ image.title }} "></a>-->

                                                    <!--</p>-->
                                                    <h3 ng-show="fault.movies.length == 0">暂时没有上传故障视频</h3>
                                                    <div ng-repeat="movie in fault.movies" style="display: inline-block;padding-left: 30px">

                                                    <video id="video" class="video-js vjs-default-skin vjs-big-play-centered"
                                                           controls preload="auto" width="225" height="300"
                                                           poster="../img/pure-black.jpg" data-setup='' >
                                                        <source ng-src="{{ getMovieSrc(movie.title) }}" type='video/mp4' />

                                                        <p class="vjs-no-js">播放视频需要启用 JavaScript，推荐使用支持HTML5的浏览器访问。</p>
                                                    </video>

                                                    </div>

                                                </div>

                                            </div>

                                            <div id="tab-5" class="tab-pane">
                                                <h3 id="noLivingNotice">目前针对此故障尚未有直播推流</h3>

                                                <div class="panel-body">
                                                    <!--<video id="my-video" class="video-js" controls preload="none" width="320" height="568"-->
                                                           <!--data-setup='{"autoplay":true}'>-->
                                                        <!--<source src="rtmp://cncmonitor.top:1935/rtmplive/room" type="rtmp">-->

                                                    <div id="videos">
                                                        <video id="me" autoplay></video>
                                                    </div>

                                                </div>

                                            </div>




                                        </div>

                                        <!--</div>-->

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        <div class="col-sm-3">
            <div class="wrapper wrapper-content project-manager">
                <h3>故障详细描述</h3>
                <p class="small">
                    <br>{{ fault.description }}
                </p>
                <p class="small font-bold">
                    <span><i class="fa fa-circle text-warning"></i> 高优先级</span>
                </p>

                <hr>
                <h3>故障分析文档</h3>
                <ul class="list-unstyled project-files" ng-repeat = "file in fault.files">
                    <li><i class="fa fa-file"></i> <a ng-click="downloadFile(file.saveName,file.originalName)" ng-bind="file.originalName" ></a>
                        <a  ng-click="downloadFile(file.saveName,file.originalName)" class=" btn btn-xs btn-primary"> 下载 </a>
                    </li>

                </ul>
                <div class="m-t-md">
                    <a ng-click="uploadFaultImage(fault._id)" class="btn btn-xs btn-primary">添加文档</a>

                </div>







            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>

    <script src="../js/plugins/treeview/bootstrap-treeview.js"></script>
    <!--<script src="../js/demo/treeview-demo.js"></script>-->

    <!-- 自定义js -->
    <script src="../js/content.js?v=1.0.0"></script>


    <!--播放器-->
    <!--<script src="http://vjs.zencdn.net/5.11.7/video.js"></script>-->
    <script src="https://vjs.zencdn.net/5.11/video.min.js"></script>

    <!--图表-->
    <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>


    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular-cookies.js"></script>
    <!--<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>-->
    <!--<script src="//cdn.bootcss.com/angular.js/1.5.8/angular-route.js"></script>-->
    <!--<script src="/controllers/client.js"></script>-->
    <script type="text/javascript" src="../controllers/projects.js"></script>




    <!-- 自定义js -->
    <!--<script src="js/content.js?v=1.0.0"></script>-->


    <!-- blueimp gallery -->
    <script src="../js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>


    <!-- JSKnob -->
    <script src="../js/plugins/jsKnob/jquery.knob.js"></script>

    <script src="../js/js.cookie.js"></script>


    <script type="text/javascript" src="/socket.io/socket.io.js"></script>

    <script src="../js/moment.min.js"></script>



    <script src="../js/SkyRTC-client.js"></script>

    <script>

        var socket = io();

        //直播监控


        var id = Cookies.get('faultId');
        var currentId = id.replace("\"","").replace("\"","");




//        $('#my-video').hide();
//        $.get('/api/isNowLiving',function (res) {
//            var livingId = res.livingId;
//            if (livingId == currentId){
//                $("#noLivingNotice").hide();
//                $('#my-video').show();
//            }
//        })

//        var player = videojs('my-video');
//        var options = {};
//
//        var player = videojs('my-video', options, function onPlayerReady() {
//            videojs.log('Your player is ready!');
//
//            // In this context, `this` is the player that was created by Video.js.
////            this.play();
//
//            // How about an event listener?
//            this.on('ended', function() {
//                videojs.log('Awww...over so soon?!');
//            });
//        });


//        socket.on("beginLiving",function (fautlId) {
//            if(fautlId == currentId ){
//                $("#noLivingNotice").hide();
//                $('#my-video').show();
//            }else {
//                $("#noLivingNotice").show();
//                $('#my-video').hide();
//            }
//        })



        //webrtc
        var rtc = SkyRTC();
        //成功创建WebSocket连接
        rtc.on("connected", function(socket) {
            //创建本地视频流
            console.log("rtc con")
            rtc.createStream({
                "video": true,
                "audio": true
            });
        });

        //创建本地视频流成功
        rtc.on("stream_created", function(stream) {
            document.getElementById('me').src = URL.createObjectURL(stream);
            document.getElementById('me').play();
        });
        //创建本地视频流失败
        rtc.on("stream_create_error", function() {
            alert("创建本地视频流失败");
        });

        rtc.on('pc_add_stream', function(stream, socketId) {
            var newVideo = document.createElement("video"),
                    id = "other-" + socketId;
            newVideo.setAttribute("class", "other");
            newVideo.setAttribute("autoplay", "autoplay");
            newVideo.setAttribute("id", id);
            videos.appendChild(newVideo);
            rtc.attachStream(stream, id);
        });

        //删除其他用户
        rtc.on('remove_peer', function(socketId) {
            var video = document.getElementById('other-' + socketId);
            if(video){
                video.parentNode.removeChild(video);
            }
        });


        //连接WebSocket服务器
//        rtc.connect("wss:" + window.location.href.substring(window.location.protocol.length).split('#')[0], window.location.hash.slice(1));

        rtc.connect("wss:www.cncmonitor.top:3333/#100")

        socket.on("imageUploaded",function (msg) {
            console.log("我知道图片更新了");
            angular.element('#mycontroller').scope().getFault();
        })

        socket.on("newMovieUpload",function (msg) {
            angular.element('#mycontroller').scope().getFault();
        })


        $(document).ready(function () {


            var globalTempeDatas;
            var globalCurrentDatas;
            function updateHistrotyChart() {
                $.get("/api/tempDataHistory/"+currentId,function (data) {


                    var noData = [
                        {
                            text: '温度传感器',
                            href: '#parent1',
//
                        },

                        {
                            text: '电流传感器',
                            href: '#parent2',

                        }


                    ];

                    if(data=='notfind'){

                        $('#treeview4').treeview({

                            color: "#428bca",
                            levels: 1,
                            data: noData,

                        });

                        return;
                    }
                    var tempeDataList = data.tempeDataList;
                    var currentDataList = data.currentDataList;

                    globalTempeDatas = tempeDataList;
                    globalCurrentDatas = currentDataList;

                    console.log(tempeDataList);

                    var tempeNodes = [];
                    var length = tempeDataList.length;
                    for (var i=0;i<length;i++){
                        var obj = tempeDataList[i];
                        var timeStr = obj.date;

                        var momentStr = moment(timeStr, moment.ISO_8601) - 1000*obj.dataList.length;
                        console.log("momentStr----" + momentStr)


//                    var timeStrAft = timeStr.substring(0,16).replace("T"," ");
                        var tempeNode = {
                            text: moment(momentStr).utcOffset(-8).format('YYYY-MM-DD HH:mm'),
                            tags:[0,i],

                        }
                        tempeNodes.push(tempeNode);
                    }
                    console.log(tempeNodes)

                    var currentNodes = [];
                    length = currentDataList.length;
                    for (var i=0;i<length;i++){
                        var obj = currentDataList[i];
                        var timeStr = obj.date;
                        var momentStr = moment(timeStr, moment.ISO_8601) - 1000*obj.dataList.length;


//                    var timeStrAft = timeStr.substring(0,16).replace("T"," ");
                        var currentNode = {
                            text: moment(momentStr).utcOffset(-8).format('YYYY-MM-DD HH:mm'),
                            tags:[1,i],
                            parentTag:1

                        }
                        currentNodes.push(currentNode);
                    }


                    var defaultData = [
                        {
                            text: '温度传感器',
                            href: '#parent1',
//                    tags: ['4'],
                            nodes:tempeNodes
                        },

                        {
                            text: '电流传感器',
                            href: '#parent2',
//                    tags: ['4'],
                            nodes:currentNodes
                        }


                    ];
                    $('#treeview4').treeview({

                        color: "#428bca",
                        levels: 1,
                        data: defaultData,
                        onNodeSelected: function (event, node) {
                            console.log('您单击了 '+node.text + "   " + node.tags);
//                        console.log(data[node.tag].dataList);
//                        refresh(data[node.tag]);
                            var tags = node.tags;
                            var i = tags[0];
                            var j = tags[1];


                            if (i == 0){
                                refresh(globalTempeDatas[j],i)
                            }else {
                                refresh(globalCurrentDatas[j],i)

                            }


                        }
                    });
                })

            }



            socket.on("monitorEnd",function (msg) {
                setTimeout(updateHistrotyChart,1000);

            })


            updateHistrotyChart();



            function refresh(selData,tag) {

                var text = "";
                var unit = "";
                var seriesText = ""
                if(tag == 0){
                    text = '温度传感器历史数据';
                    unit = '温度(℃)'
                    seriesText = '温度'
                }else{
                    text = '电流传感器历史数据';
                    unit = '电流(A)';
                    seriesText = '电流'
                }

                $('#history-container').highcharts({
                    chart: {
                        zoomType: 'x'
                    },
                    title: {
                        text:text
                    },
                    subtitle: {
                        text: document.ontouchstart === undefined ?
                                '鼠标拖动可以进行缩放' : '手势操作进行缩放'
                    },
                    xAxis: {
                        type: 'datetime',
                        dateTimeLabelFormats: {
                            millisecond: '%H:%M:%S.%L',
                            second: '%H:%M:%S',
                            minute: '%H:%M',
                            hour: '%H:%M',
                            day: '%m-%d',
                            week: '%m-%d',
                            month: '%Y-%m',
                            year: '%Y'
                        }
                    },
                    tooltip: {
                        dateTimeLabelFormats: {
                            millisecond: '%H:%M:%S.%L',
                            second: '%H:%M:%S',
                            minute: '%H:%M',
                            hour: '%H:%M',
                            day: '%Y-%m-%d',
                            week: '%m-%d',
                            month: '%Y-%m',
                            year: '%Y'
                        }
                    },
                    yAxis: {
                        title: {
                            text: unit
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        area: {
                            fillColor: {
                                linearGradient: {
                                    x1: 0,
                                    y1: 0,
                                    x2: 0,
                                    y2: 1
                                },
                                stops: [
                                    [0, Highcharts.getOptions().colors[0]],
                                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                ]
                            },
                            marker: {
                                radius: 2
                            },
                            lineWidth: 1,
                            states: {
                                hover: {
                                    lineWidth: 1
                                }
                            },
                            threshold: null
                        }
                    },
                    series: [{
                        type: 'area',
                        name: seriesText,
                        data: (function () {
                // generate an array of random data
                var data = [],

                        i;
                for (i = - selData.dataList.length; i <= 0; i += 1) {
                    var time = moment(selData.date, moment.ISO_8601) + i * 1000;
                    data.push({
                        x: time - time%1000,
                        y: selData.dataList[i + selData.dataList.length]
                    });
                }
//
//                        datalist = data;
                return data;
            }())
                    }]
                });
            }


            //温度socket


            $(".dial").knob();


            var datalist;

            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

            //一开始隐藏
            $('#temperate-container').hide();
            $('#current-container').hide();
//            socket.on("monitorEnd",function (msg) {
//                $('#temperate-container').hide();
//                $('#current-container').hide();
//
//            });


            var shouldShowData = false;
            socket.on("monitoringId",function (monitoringId) {

                if(currentId == monitoringId){
                    shouldShowData = true;
                    $('#noticeNoLink').hide();
                }else {
                    shouldShowData = false;
                }
                console.log("开始监控的faultId----" + monitoringId);
                console.log("本页面的faultId==="+Cookies.get('faultId'));
            })
            socket.on("monitorBegin",function (msg) {

                if (shouldShowData == true){
                    $('#temperate-container').show();
                    $('#current-container').show();
                    $('#noSensorNotice').hide();
                }else {
                    $('#temperate-container').hide();
                    $('#current-container').hide();
                    $('#noSensorNotice').show();
                }

            })


            function activeLastPointToolip(chart) {
                var points = chart.series[0].points;
                chart.tooltip.refresh(points[points.length -1]);
            }
            $('#temperate-container').highcharts({
                chart: {
                    type: 'spline',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10,
                    events: {
                        load: function () {
                            // set up the updating of the chart each second
                            var series = this.series[0];
                            var chart = this;
//                            setInterval(function () {
//                                var x = (new Date()).getTime(), // current time
//                                        y = Math.random();
//                                datalist.shift();
//                                datalist.push([x,y]);
//                                series.addPoint([x, y], true, true);
//                            }, 1000);

                            socket.on("temperature",function(tempe){
                                if($('#temperate-container').is(':hidden') && shouldShowData == true){
                                    $('#temperate-container').show();
                                    $('#current-container').show();
                                }
                                var x = (new Date()).getTime(),
                                        y = parseFloat(tempe);
                                datalist.shift();
                                datalist.push([x,y]);
                                series.addPoint([x, y], true, true);
                                activeLastPointToolip(chart)
                            });
                        }
                    }
                },
                title: {
                    text: '温度传感器'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 120
                },
                yAxis: {
                    title: {
                        text: '温度（℃）',
//                        style: {
//                            color: '#3E576F'
//                        }
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                Highcharts.numberFormat(this.y, 2);
                    }
                },
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: true
                },

//                plotOptions: {
//                    spline: {
//                        marker:{
//                            enabled: false,
//                            states: {
//                                hover: {
//                                    enabled: true,
//                                    symbol: 'circle',
//                                    radius: 5,
//                                    lineWidth: 1
//                                }
//                            }
//                        }
//                    }
//                },
                series: [{
                    name: '温度',
                    data: (function () {
                        // generate an array of random data
                        var data = [],
                                time = (new Date()).getTime(),
                                i;
                        for (i = -38; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 1000,
                                y: 0
                            });
                        }
                        datalist = data;
                        return data;
                    }())
                }]
            });



            $('#current-container').highcharts({
                chart: {
                    type: 'spline',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10,
                    events: {
                        load: function () {
                            // set up the updating of the chart each second
                            var series = this.series[0];
                            var chart = this;
//                            setInterval(function () {
//                                var x = (new Date()).getTime(), // current time
//                                        y = Math.random();
//                                datalist.shift();
//                                datalist.push([x,y]);
//                                series.addPoint([x, y], true, true);
//                            }, 1000);

                            socket.on("current",function(current){
                                var x = (new Date()).getTime(),
                                        y = parseFloat(current);
//                                datalist.shift();
//                                datalist.push([x,y]);
                                series.addPoint([x, y], true, true);
                                activeLastPointToolip(chart)
                            });
                        }
                    }
                },
                title: {
                    text: '电流传感器'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 120
                },
                yAxis: {
                    title: {
                        text: '电流(A)',
//                        style: {
//                            color: '#3E576F'
//                        }
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                Highcharts.numberFormat(this.y, 2);
                    }
                },
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: true
                },

//                plotOptions: {
//                    spline: {
//                        marker:{
//                            enabled: false,
//                            states: {
//                                hover: {
//                                    enabled: true,
//                                    symbol: 'circle',
//                                    radius: 5,
//                                    lineWidth: 1
//                                }
//                            }
//                        }
//                    }
//                },
                series: [{
                    name: '电流',
                    data: (function () {
                        // generate an array of random data
                        var data = [],
                                time = (new Date()).getTime(),
                                i;
                        for (i = -38; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 1000,
                                y: 0
                            });
                        }
//                        datalist = data;
                        return data;
                    }())
                }]
            });




            $('#saveDatalist').click(function () {

                var chart=$("#temperate-container").highcharts();

                console.log(chart.series[0].xData);
                console.log(chart.series[0].yData);

//               console.log($('#temperate-container').highcharts().series;
                //温度传感器可能用到  这里先写  数组中时间 和 数据

//                var timeArray = [];
//                var valueArray = [];
//                datalist.forEach(function (data) {
////                    var obj = {
////                        "time":new Date(data[0]),
////                        "value":data[1]
////                    }
////                    postObjs.push(obj);
//
//                    timeArray.push(data[0]);
//                    valueArray.push(data[1]);
//                });
//
                $.post("/api/temperatureList",{
                    "timelist":chart.series[0].xData,
                    "datalist":chart.series[0].yData,
                    "faultId":Cookies.get('faultId')
                },function(result){

                });



            });




            $('#loading-example-btn').click(function () {
                btn = $(this);
                simpleLoad(btn, true)

                // Ajax example
                //                $.ajax().always(function () {
                //                    simpleLoad($(this), false)
                //                });

                simpleLoad(btn, false)
            });
        });

        function simpleLoad(btn, state) {
            if (state) {
                btn.children().addClass('fa-spin');
                btn.contents().last().replaceWith(" Loading");
            } else {
                setTimeout(function () {
                    btn.children().removeClass('fa-spin');
                    btn.contents().last().replaceWith(" Refresh");
                }, 2000);
            }
        }
    </script>

    
    

</body>

</html>
